<template>
  <div ref="chartRef" style="width: 100%;height: 100%"></div>
</template>

<script>
import chartSource from "@/views/chart/ChartSource";

export default {
  name: "PieChart",
  mixins: [chartSource],
  methods: {
    initOptions() {
      this.suffixs.forEach(item => {
        const index = this.list.findIndex(e => e.name === item)
        if (index < 0) {
          this.list.push({ name: item, value: 0 })
        }
      })
      this.options = {
        legend: {
          top: 'bottom'
        },
        // 标题
        title: {
          text: '文件类型规则数量',
          left: 'center'
        },
        // 弹出展示
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            name: '规则类型分布',
            type: 'pie',
            radius: [10, 120],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 1
            },
            data: this.list
          }
        ]
      };
      this.loadSource()
    }
  }
}
</script>

<style scoped>

</style>
